<template>
<div id="patentWall">
  <el-carousel :interval="4000" type="card" indicator-position="outside">
    <el-carousel-item v-for="item in imagesBox" :key="item.id">
      <img :src="item.idView" class="image" />
    </el-carousel-item>
  </el-carousel>
  <h2>专利展示</h2>
  <div class="whole" >
      <el-container class="main" v-for="item in patents" :key="item.id">
        <el-header>
          <el-row :gutter="10" >
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1">{{item.patent}}<el-divider direction="vertical"></el-divider></el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content middle"></div></el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content middle"></div></el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content title">{{item.type_id}}</div></el-col>
          </el-row>
        <el-divider></el-divider>
        </el-header>
        <el-container>
          <el-aside width="220px">
            <div>
              <el-image class="img"
                style="width: 200px; height: 200px"
                src="https://www.aiit.edu.cn/uploads/25/image/public/202004/20200430142313_7okvvq256f.jpg"
                title="【专利小贴士】如何进行专利申请"
                :fit="fit"
                :preview-src-list="srcList"></el-image>
            </div>
          </el-aside>
          <el-main>
            <p>{{item.content}}</p>
            <el-link @click="drawer = true" type="info">查看原文<i class="el-icon-view el-icon--right"></i></el-link>    
            <el-drawer
              title="【专利小贴士】如何进行专利申请"
              :visible.sync="drawer"
              :direction="direction"
              :before-close="handleClose">
              <p>
                {{item.content_news}}
            <!-- 1、什么是专利？
            “专利”即是指专有的利益和权利，一项发明创造的首创者所拥有的受保护的独享权益。专利是世界上最大的技术信息源，据实证统计分析，专利包含了世界科技技术信息的90%-95%。专利是受法律规范保护的发明创造，它是指一项发明创造向国家审批机关提出专利申请，经依法审查合格后向专利申请人授予的在规定的时间内对该项发明创造享有的专有权。
            2、专利的种类有哪些？
            专利的种类在不同的国家有不同规定，在我国专利法中规定有：发明专利、实用新型专利和外观设计专利。发明是指对产品、方法或者其改进所提出的新的技术方案。实用新型是指对产品的形状、构造或者其结合所提出的适于实用的新的技术方案。外观设计是指对产品的形状、图案或其结合以及色彩与形状、图案的结合所作出的富有美感并适于工业应用的新设计。
            3、专利有哪些申请原则？
            形式法定原则：申请专利的各种手续，都应当以书面形式或者国家知识产权局专利局规定的其他形式办理。以口头、电话、实物等非书面形式办理的各种手续，或者以电报、电传、传真、胶片等直接或间接产生印刷、打字或手写文件的通讯手段办理的各种手续均视为未提出，不产生法律效力。
            专利单一性原则：是指一件专利申请只能限于一项发明创造。但是属于一个总的发明构思的两项以上的发明或者实用新型，可以作为一件申请提出；用于同一类别并且成套出售或者使用的产品的两项以上的外观设计，可以作为一件申请提出。
            专利先申请原则：两个或者两个以上的申请人分别就同样的发明创造申请专利的，专利权授给最先申请的人。
            4、怎样申请专利？
            专利申请前检索：专利申请前，最好进行检索，以便确定哪些发明内容属于“现有技术”。如果待申请的内容在检索到的专利文献或者其他公开出版物上已有记载，则有可能影响申请的授权前景。此外，即使没有文献记载，如果他人能够确定这是本领域的公知常识，也会导致专利申请被驳回。
            撰写专利申请文件：申请发明专利的，申请文件应当包括：发明专利请求书、摘要、摘要附图（适用时）、说明书、权利要求书、说明书附图（适用时），各一式两份。申请实用新型专利的，申请文件应当包括：实用新型专利请求书、摘要、摘要附图（适用时）、说明书、权利要求书、说明书附图，各一式两份。申请外观设计专利的，申请文件应当包括：外观设计专利请求书、图片或者照片（要求保护色彩的，应当提交彩色图片或者照片）以及对该外观设计的简要说明，各一式两份。提交图片的，两份均应为图片，提交照片的，两份均应为照片，不得将图片或照片混用。文件相关格式可到中国知识产权局网站下载。
            专利申请文件报送专利局：　申请人申请专利时,可以将申请文件面交到国家知识产权局专利局的受理窗口或寄交“国家知识产权局专利局受理处”收（以下简称专利局受理处），也可以面交到设在地方的国家知识产权局专利局代办处（以下简称专利局代办处）的受理窗口或寄交“专利局×××代办处”收。目前在北京、沈阳、济南、长沙、成都、南京、上海、广州、西安、武汉、郑州、天津、石家庄、哈尔滨、长春、昆明、贵阳、杭州、重庆、深圳、福州、南宁、乌鲁木齐、南昌、银川、合肥设立国家知识产权局专利局代办处。国防专利分局专门受理国防专利申请。
            专利局审查结论：中国专利局根据审查情况将会作出授权或驳回审查结论，这一过程的时间一般为：外观设计6个月左右，实用新型6-8个月左右，发明专利一年半到2年的时间。（自提出申请之日起满一定期限）即予以公布，给予临时保护；在公布后一定年限内（我国为3年）经申请人要求专利局进行实质审查，逾期未要求实质审查的，则视为撤回申请）。
            办理专利登记手续或复审请求：如果专利申请被授权，则根据专利授权通知书的要求办理登记手续，领取专利证书。如果专利申请被驳回，则根据具体的情况确定是否提出复审请求。至此，专利申请过程即结束。
            5、有哪些专利检索平台？
            中国知识产权局检索平台：http://www.sipo.gov.cn/zljsfl/
            中国专利查询系统：http://cpquery.sipo.gov.cn/
            无量专利网：http://zhuanli360net.lofter.com/
            SooPAT专利检索：http://www2.soopat.com/Home/IIndex
            6、什么是先申请原则？
            在我国，审批专利采用先申请原则。即两个以上的申请人分别就同样的发明创造申请专利的，专利权授予最先申请的人。因此申请人应及时将其发明申请专利，以防他人抢先申请。由于申请专利的技术须具有新颖性，因此发明人有了技术成果之后，应首先申请专利，再发表论文，以免因过早公开技术而丧失申请专利的机会。<br/><br/>
            7、发明、实用新型、外观设计专利权的期限各是多少年？
            发明专利权的期限为二十年，实用新型专利权和外观设计专利权的期限为十年，均自申请日起计算。 -->
              </p>
            </el-drawer>
          </el-main>
        </el-container>
      </el-container>
  </div>
</div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      imagesBox: [
        {
          id: 0,
          idView:
            "https://cse.aiit.edu.cn/uploads/45/image/public/202103/20210322165607_tljdye0icf.png",
        },
        {
          id: 1,
          idView:
            "https://www.aiit.edu.cn/uploads/25/image/public/202004/20200430142120_sg7cm5h8pq.jpg",
        },
        {
          id: 2,
          idView:
            "https://www.aiit.edu.cn/uploads/25/image/public/202004/20200430142313_7okvvq256f.jpg",
        },
      ],
      fit: ['cover'],
      srcList: [
        'https://cse.aiit.edu.cn/uploads/45/image/public/202103/20210322165607_tljdye0icf.png' ,
        'https://www.aiit.edu.cn/uploads/25/image/public/202004/20200430142120_sg7cm5h8pq.jpg',
        'https://www.aiit.edu.cn/uploads/25/image/public/202004/20200430142313_7okvvq256f.jpg',
        'https://www.aiit.edu.cn/uploads/25/image/public/201908/20190801162949_mujc0072xv.jpg',
        'http://www.aiit.edu.cn/uploadfiles/image/201705/274.jpg',
        'https://www.aiit.edu.cn/uploads/305/image/public/202101/20210112151452_ieuqowmw6d.png',
      ],
      patents:[]
    };
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
      .then(_ => {
        done();
      })
      .catch(_ => {});
    },
    getpatent() {
      axios.get("http://localhost:9090/api/patent").then((response) => {
        this.patents = response.data.message;
        console.log(response);
      });
    },
  },
  created(){
      this.getpatent();
    }
};
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 300px;
}
#patentWall {
  padding: 20px 20px 0 20px !important;
}
.whole {
  width: 65%;
  height: auto;
  margin: 0 auto;
}
p {
  text-align:left;
}
.none {
  color: white;
}
.img {
  margin-left: 10px;
}
.main {
  height: 310px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12),0 0 6px rgba(0, 0, 0, .04);
}
.el-header {
  line-height: 40px;
}
.el-aside {
  height: 300px;
  width: 300px;
}
.el-main {
  line-height: 25px;
}
.el-col {
  border-radius: 4px;
}
.title {
  background: #d4d0d0;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>